<template>
    <div class="about">
        <navigation></navigation>
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="head animate__animated animate__bounceInDown"><img src="../../assets/head/1.jpg" alt=""></div>
                    <el-card class="box-card animate__animated animate__bounceInUp" shadow="hover">
                        <h4 class="ly">梁颖</h4>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <div class="head animate__animated animate__bounceInDown"><img src="../../assets/head/4.jpg" alt=""></div>
                    <el-card class="box-card animate__animated animate__bounceInUp" shadow="hover">
                        <h4 class="ly">付成</h4>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="head animate__animated animate__bounceInDown"><img src="../../assets/head/3.jpg" alt=""></div>
                    <el-card class="box-card animate__animated animate__bounceInUp" shadow="hover">
                        <h4 class="ly">吴安琦</h4>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import navigation from "@/components/navigation/navigation"
    export default {
        name: "AboutWe",
        components: {
            navigation
        },
        methods: {

        }
    }
</script>

<style scoped>
    .about {
        width: 100%;
        height: 100vh;
        background-image: linear-gradient(to top, RGB(233,238,243) ,RGB(211,220,230) , RGB(179,192,209));
    }
    .grid-content {
        position: relative;
        margin: 44% auto;
        width: 430px;
        height: 500px;
    }
    .box-card{
        height: 500px;
        border-radius: 5%;
        background-color: RGB(232,237,242);
    }
    .head {
        position: absolute;
        width: 120px;
        height:120px;
        border-radius: 50%;
        background-color: RGB(229,235,241);
        top: -60px;
        left: 155px;
        z-index: 8;
        overflow: hidden;
        padding: 4px;
    }
    .head img {
        width: 100%;
        height: 100%;
    }
    .grid-content h4 {
        font-size: 22px;
        font-family: Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    }
    .animate__animated.animate__bounceInDown {
        --animate-duration: 4s;
    }
    .ly{
        text-align: center;
        padding-top: 30px;
    }
</style>
